<template>
	<view class="search-box">
		<view class="search dispaly-just-between">
			<view class="inp">
				<u-search :clearabled="false" bg-color="#F4F6F8" v-model="keyword" :show-action="false" height="70"
					placeholder="高端西服定制"></u-search>
			</view>
			<view class="confirm dispaly-align-center" @click="emit('search', keyword)">搜索</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const emit = defineEmits('search')
	const keyword = ref('')
</script>

<style lang="scss" scoped>
	.search-box {
		background-color: #fff;
		padding: 12rpx 0;
		padding: 0 32rpx;
		margin-bottom: 16rpx;

		.search {
			width: 100%;
			height: 72rpx;
			background: #F4F6F8;
			border-radius: 36rpx;

			.confirm {
				width: 96rpx;
				height: 56rpx;
				background: #020121;
				border-radius: 36rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-right: 10rpx;
			}
		}
	}
</style>